<template>
	<view class="block">
		<view class="header">
			<view class="nav">
				<view class="left" @click="backRouter">
					<image src="@/static/images/back2.png"></image>
				</view>
				<view class="right" @click="router('/pages/club/illustrate')">
					<image src="@/static/images/c16.png"></image>
					<text>说明</text>
				</view>
			</view>
			<view class="head">
				<image src="@/static/images/c17.png"></image>
				<text>品牌至尊卡</text>
			</view>
			<view class="desc">{{integral}}积分兑换</view>
			<view class="btn" @click="submit">确认兑换</view>
			<view class="value">当前积分:{{user_integral}}</view>
		</view>
		<view class="content">
			<!-- <view class="title" v-if="roll_list.length>0">实时信息</view> -->
			<view class="real_list" v-if="roll_list.length>0">
				<scroll-view scroll-y :scroll-top="scrollTop" class="real_view" @scrolltolower="lower"
					lower-threshold="20">
					<view class="item" v-for="(item,index) in roll_list" :key="item.id">
						<uv-icon name="volume" color="#F3E4BC"></uv-icon>
						<view>最新消息: {{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="title">我的至尊卡</view>
			<view class="list">
				<view class="item" v-for="item in _this.list">
					<view class="label_view">
						<view class="label_cell">
							<view class="label">排序{{item.ranking}}</view>
							<view class="label">阶段进度：{{item.stage_name}}</view>
						</view>
						<view class="id" v-if="item.invest_id>0">投资人ID:{{item.invest_id}}</view>
					</view>
					<view class="progress">
						<view class="progress_view">
							<view class="progress_value"
								:style="{width:item.people/item.all_people>1?100:(item.people/item.all_people)*100+'%'}">
							</view>
						</view>
						<view class="number">
							<view class="value">{{item.people}}</view>
							<view class="unit">人</view>
						</view>
					</view>
					<view class="item_view">
						<view class="left">
							<view>{{item.bouns_name}}</view>
						</view>
						<view class="btn" @click="receive(item.id)"
							v-if="item.people>=item.all_people&&item.invest_id==0">
							立即领取
						</view>
						<!-- <view class="btn" @click="receive(item.id)">
							立即领取
						</view> -->
					</view>
				</view>
			</view>
			<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
		</view>
		<uv-popup ref="popupRef" bgColor="none" safeAreaInsetBottom mode="center">
			<Receive :id="props_id" @close="popupRef.close" />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		supreme,
		supremeJoin,
		supremeReceive
	} from "@/request/api";
	import Receive from "@/components/club/Receive.vue";
	import useList from "@/hooks/useList.js";
	import useBase from "@/hooks/useBase.js";
	const {
		_this
	} = useList();
	const {
		router
	} = useBase();
	import {
		onReady,
		onReachBottom,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		ref,
		shallowRef,
		computed
	} from "vue";
	const timer = ref(null),
		scrollTop = ref(0);

	let integral = ref(""),
		user_integral = ref(""),
		roll_list = ref([]);
	const getList = async () => {
		let res = await supreme({
			page: _this.page,
			limit: _this.limit
		});
		integral.value = res.integral;
		user_integral.value = res.user_integral;

		let temp = [];
		res.rolling.forEach((item, index) => {
			// if (index <= 5) {
			// 	temp.push({
			// 		id: uni.$uv.random(1, 999999),
			// 		name: item
			// 	})
			// }
			temp.push({
				id: uni.$uv.random(1, 999999),
				name: item
			})
		});
		console.log(temp)
		roll_list.value = temp;
		if (res.rolling.length > 6) {
			timer.value = setInterval(() => {
				scrollTop.value += 20;
			}, 1000)
		}
		let list = res.list;
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();

	const lower = () => {
		let item = roll_list.value.shift();
		roll_list.value.push(item);
	};

	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};

	const submit = async () => {
		await supremeJoin();
		uni.$uv.toast("操作成功");
		setTimeout(() => {
			_this.page = 1;
			getList();
		}, 1500);
	};

	const popupRef = shallowRef();
	const props_id = ref("");
	const receive = async (id) => {
		props_id.value = id;
		popupRef.value.open();
		// await supremeReceive({
		// 	id
		// });
		// uni.$uv.toast("操作成功");

		// _this.page = 1;
		// setTimeout(() => {
		// 	getList();
		// }, 1000);
	};
	const backRouter = () => uni.navigateBack();
	onUnload(() => clearInterval(timer.value));
	onReachBottom(() => loadmore());
</script>

<style scoped lang="scss">
	.block {
		.header {
			width: 100%;
			height: 520rpx;
			padding: 100rpx 30rpx 20rpx;
			box-sizing: border-box;
			background: url(@/static/images/bg3.png) no-repeat;
			background-size: 100% 100%;

			.nav {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					image {
						width: 44rpx;
						height: 44rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						color: #171F48;
						font-size: 24rpx;
						font-weight: bold;
						padding-left: 8rpx;
						box-sizing: border-box;
					}
				}
			}

			.head {
				padding: 30rpx 0;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 70rpx;
					height: 44rpx;
				}

				text {
					color: #8C673F;
					font-size: 36rpx;
					font-weight: 800;
				}
			}

			.desc {
				color: #8C673F;
				font-size: 44rpx;
				font-family: Alimama ShuHeiTi;
				font-weight: bold;
			}

			.btn {
				width: 620rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 20rpx;
				margin: 60rpx auto 0;
				background: #232323;
			}

			.value {
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				color: #8C673F;
				font-size: 32rpx;
				font-family: Alimama ShuHeiTi;
				padding-top: 10rpx;
				box-sizing: border-box;
			}
		}

		.content {
			padding: 0 28rpx;
			box-sizing: border-box;

			.title {
				color: #222222;
				font-size: 32rpx;
				font-weight: bold;
				padding: 30rpx 0 36rpx 12rpx;
				box-sizing: border-box;
			}

			.real_list {
				width: 100%;
				box-sizing: border-box;
				height: 280rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background: #232323;
				overflow: hidden;

				.real_view {
					width: calc(100vw - 56rpx + 20rpx);
					height: 240rpx;

					.item {
						width: calc(100vw - 96rpx);
						// height: 40rpx;
						line-height: 40rpx;
						padding: 10rpx 0;
						display: flex;
						// align-items: center;

						view {
							color: #F3E4BC;
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}
			}

			.list {
				.item {
					border-radius: 20rpx;
					margin-bottom: 28rpx;
					border: 4rpx solid #F3BD46;
					padding: 22rpx 40rpx;
					box-sizing: border-box;
					box-shadow: 0rpx 0rpx 20rpx 0rpx #CCCCCC;
					background: linear-gradient(70deg, #FFF2DE, #F9D6A8);

					.label_view {
						display: flex;
						justify-content: space-between;

						.label_cell {
							display: flex;

							.label {
								color: #171F48;
								font-size: 28rpx;
								font-weight: bold;
								box-sizing: border-box;

								&:first-child {
									padding-right: 30rpx;
									position: relative;

									&::after {
										content: "";
										width: 4rpx;
										height: 19rpx;
										background-color: #171F48;
										position: absolute;
										right: 0;
										top: 50%;
										transform: translateY(-50%);
										z-index: 2;
									}
								}

								&:last-child {
									padding-left: 30rpx;
								}
							}
						}

						.id {
							color: #171F48;
							font-size: 28rpx;
							font-weight: bold;
						}
					}

					.progress {
						padding-top: 20rpx;
						padding-bottom: 35rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.progress_view {
							width: 470rpx;
							height: 20rpx;
							background: rgba(255, 255, 255, .2);
							position: relative;

							.progress_value {
								// width: 30%;
								height: 20rpx;
								background: #FFCD88;
								position: absolute;
								left: 0;
								top: 0rpx;
								z-index: 2;
							}
						}

						.number {
							display: flex;
							align-items: center;

							.value {
								color: #171F48;
								font-size: 50rpx;
								font-weight: bold;
							}

							.unit {
								color: #171F48;
								font-size: 24rpx;
								font-weight: bold;
							}
						}
					}

					.item_view {
						width: 100%;
						height: 90rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							flex: 1;
							height: 90rpx;
							border-radius: 10rpx;
							background: #FDE9CD;
							display: flex;
							align-items: center;

							view {
								color: #BD7819;
								font-size: 28rpx;
								font-weight: bold;
								// margin-left: 32rpx;
								padding: 0 16rpx;
								box-sizing: border-box;
							}
						}

						.btn {
							width: 120rpx;
							height: 52rpx;
							line-height: 52rpx;
							text-align: center;
							color: #FFFFFF;
							font-size: 24rpx;
							border-radius: 10rpx;
							margin-left: 34rpx;
							background: #A86E1E;
						}
					}
				}
			}
		}
	}
</style>